<template>
	<view>
		<view class="fm_box">
			<u-image width="100%" height="430rpx" :src="taskInfo.image"></u-image>
			<view class="movie_name mdx-center-xs">
				{{taskInfo.film_name||''}}
			</view>
		</view>
		<view class="mdx-center-min modeBox u-p-20">
			<view class="active_title">
				{{taskInfo.activity_name||''}}
			</view>
			<view class="actEndtime">
				活动时间：
			</view>
			<view class="actEndtime u-margin-top-10">
				<view class="u-flex time_lines">
					<view class="leftTitle">
						开始时间
					</view>
					<view class="right_box">
						<u-input @click="selectTime(1)" :height="40" v-model="startTime" type="select" :border="false"
							placeholder="请选择" />
					</view>
				</view>
				<view class="u-flex time_lines">
					<view class="leftTitle">
						结束时间
					</view>
					<view class="right_box">
						<u-input @click="selectTime(2)" :height="40" v-model="endTime" type="select" :border="false"
							placeholder="请选择" />
					</view>
				</view>
				<view class="u-flex u-margin-top-30 u-p-t-20" style="border-top: 1rpx solid #e5e5e5;">
					<view class="u-flex-1">查看任务详情</view>
					<view>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="modeBox mdx-center-min u-padding-20">
			<view class="u-flex">
				<view class="actTitle u-flex-1">
					购票平台
				</view>
				<view @click="ticketPt">
					<u-icon size="40" name="/static/images/addIcon.png"></u-icon>
				</view>
			</view>
			<view class="u-font-30" style="color: #666;">
				{{ptText||'未设置'}}
			</view>
		</view>


		<view class="modeBox mdx-center-min u-padding-20">
			<view class="u-flex">
				<view class="actTitle u-flex-1">
					场次分布
				</view>
				<view>
					<u-icon size="40" name="/static/images/addjia.png"></u-icon>
				</view>
			</view>
			<view class="sesBox" v-for="item in sessionList">
				<view class="u-flex">
					<view class="u-flex-1 time">8:00-16：00</view>
					<view class="nums">100个</view>
				</view>
				<view class="u-flex">
					<view class="u-flex-1 years">2020年2月5日</view>
					<view class="u-flex">
						<view>
							<u-icon size="40" name="/static/images/addIcon.png"></u-icon>
						</view>
						<view class="u-m-l-25">
							<u-icon size="40" name="/static/images/deleteIcon.png"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!sessionList.length">
				请添加场次
			</view>
		</view>

		<view class="modeBox mdx-center-min u-padding-20">
			<view class="actTitle">
				团长说
			</view>
			<view class="mdx-center-min tareaBox">
				<textarea value="" placeholder="请输入" maxlength="500" style="font-size: 28rpx;" />
			</view>
		</view>

		<u-gap height="180"></u-gap>
		<view class="mdx-center-min bottom_pay">
			<u-button :custom-style="customStyle" :hair-line='false' @click="addAddress">领取</u-button>
		</view>

		<!-- //时间选择 -->
		<u-picker v-model="timeShow" @confirm='timeConfirm' mode="time" :params="params"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				//
				imgsrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.zlook.com%2Fuploadfile%2F2019%2F0412%2F20190412035854568.jpg&refer=http%3A%2F%2Fnews.zlook.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624695312&t=8ce226dff4e7c9bf44a47d00149d7b6c',
				tdStyle: {
					"padding": '10rpx 0'
				},
				customStyle: {
					color: 'red',
					background: '#FFEC3E',
					color: "#000",
					border: '#fff'
				},
				//
				endTime: '', //开始时间
				startTime: '', //结束时间
				timeType: 1,

				taskInfo: [], //任务详情
				ptText: '', //购票平台
				sessionList: []
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'taskInfo',
				success: (e) => {
					this.taskInfo = e.data
				}
			})
		},
		onShow() {
			uni.getStorage({
				key: 'ptText',
				success: (e) => {
					this.ptText = e.data
				}
			})
			uni.getStorage({
				key: 'session',
				success: (e) => {
					this.sessionList.push(e.data)
				}
			})
		},
		methods: {
			//页面跳转 购票平台
			ticketPt() {
				if (!this.taskInfo.platformcity) {
					this.$refs.uToast.show({
						title: '改任务未开通购票平台',
						type: 'error',
					})
					return;
				}
				this.$mHelper.to('/pages/my/myTeam/taskSet/platformSelect?ptxt=' + this.taskInfo.platformcity)
			},
			//打开时间选择器
			selectTime(type) {
				this.timeType = type
				this.timeShow = true
			},
			timeConfirm(e) {
				console.log(e);
				if (this.timeType == 1) this.startTime = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + ':' +
					e.minute
				else this.endTime = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + ':' + e.minute
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	//、、、
	.lines {
		padding: 25rpx 20rpx;
		border-radius: 10rpx;

		background-color: #FAFAFA;
		margin-bottom: 40rpx;


	}

	.time_lines {
		padding: 25rpx 20rpx;
		background-color: #FAFAFA;
	}

	.leftTitle {
		font-size: 30rpx;
		width: 150rpx;
		border-right: 1rpx solid #DDDDDD;
		color: #999999;
	}

	.right_box {
		padding: 0 20rpx;
		flex: 1;
		position: relative;

		.code_text {
			color: #4A9CE8;
		}
	}

	.tagtext {
		position: absolute;
		right: 55rpx;
		top: 0;
		line-height: 48rpx;
		color: #666;
	}

	.border_r {
		border-right: 1rpx solid #dddddd;
	}

	.sesBox {
		border-bottom: 1rpx solid #dddddd;
		padding: 10rpx 0;

		&:last-child {
			border: none;
		}

		.time {
			font-size: 16px;
			font-weight: 400;
		}

		.nums {
			font-size: 14px;
			font-weight: 400;
			color: #999999;
		}

		.years {
			color: #999999;
			font-size: 14px;
			font-weight: 400;
		}
	}

	.tareaBox {
		border-radius: 10rpx;
		padding: 10rpx;
		background-color: #FAFAFA;
	}

	//、

	.fm_box {
		position: relative;
	}

	.movie_name {
		position: absolute;
		bottom: 15rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.active_title {
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #333333;
		font-weight: 550;

	}

	.actEndtime {
		color: #666666;
	}

	.modeBox {
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx #dddddd;
		border-radius: 10rpx;
		margin-top: 35rpx;
		overflow: hidden;
	}


	.actTitle {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 550;
	}

	.bottom_pay {
		position: fixed;
		bottom: 10rpx;
		width: 92%;
	}
</style>
